<template>
  <drawer
      :z-index="30"
      :show-close="true"
      @close="close"
      :title="'变更网点'"
      :show="props.show"
  >
    <view style="width: 100%">
      <view class="branchLists">
        <view v-for="(item,index) in branchList" class="branchRow">
          <nut-checkbox v-model="item.checked" :label="item.branchno" :disabled="true" @click="checkOne(item)"></nut-checkbox>
          <image v-if="index===0" src="@/assets/images/index/wangdian_img_tuijianwangdian.png"></image>
          <image v-else src="@/assets/images/index/wangdian_img_putongwangdian.png"></image>
          <view class="text">
            <view class="text1">{{ item.COMPANYNAME }}</view>
            <view class="text2">{{ item.LOCAL }}</view>
            <view class="text3">距离收货地{{ (item.distance/1000).toFixed(2) }}Km</view>
          </view>
          <view class="icon_group">
            <view  @click.native="toDial(item)">
              <image src="@/assets/images/index/icon_wangdiandianhua.png"></image>
            </view>
            <view  @click.native="toMap(item)">
              <image src="@/assets/images/index/icon_wangdiandaohang.png"></image>
            </view>
          </view>
        </view>
        <view class="bottoms">
          <view class="botBtn" @click="save">确定</view>
        </view>
      </view>
    </view>

    <drawer :show="showTelPopup" :show-border="false" :title="'拨打电话'" @close="closeTel" :show-close="true">
      <view class="tel_box">
        <view
            class="telrow"
            :class="{active:telSelected===index}"
            @click="changeTel(index)"
            v-for="(item,index) in telList"
        >{{item}}</view>
      </view>
      <view class="saveTel">
        <view class="btn" @click="handleDial">
          <image src="../../assets/images/orderTracking/dial.png"></image>
          <text>拨打电话</text>
        </view>
      </view>
    </drawer>
  </drawer>

</template>

<script lang="ts" setup>
import { ref , defineProps, defineEmits, withDefaults, watch } from "vue";
import Taro,{useDidShow} from "@tarojs/taro";
import drawer from '@/components/drawer';
import {getBranchTel} from "@/@api";
const props = withDefaults(
    defineProps<{
      show: boolean,
      branchNo: any,
      branchList: any,
    }>(),
    {
      show: false,
      branchNo: null,
      branchList: [],
    }
)

const emit = defineEmits(['save','close'])
const branchList = ref(props.branchList);


const save = () => {
  let arr = branchList.value.filter(item=>{return item.checked})
  if(arr.length){
    emit('save',arr[0])
  }
  else{
    emit('close')
  }
}
const close = () => {
  emit('close')
}

//选中
const checkOne = (row)=>{
  if(!row.checked){
    branchList.value.forEach(item=>{
      item.checked = (row.branchno===item.branchno)
    })
  }
}

//网点电话弹窗
const showTelPopup = ref<boolean>(false)
const telList = ref([])
const telSelected = ref<number>(0)
const toDial = async (item:any)=>{
  let res = await getBranchTel([{branchCompanyNo:item.branchno}])
  if(res.code == 200 && res.data && res.data.length){
    console.log(res.data[0].tel)
    if(!res.data[0].tel){
      Taro.showToast({
        icon: 'none',
        title: '该网点无联系方式'
      })
    }
    else{
      let str = res.data[0].tel
      if(str.indexOf('/')!==-1){
        telList.value = str.split('/')
      }
      else if(str.indexOf(';')!==-1){
        telList.value = str.split(';')
      }
      else if(str.indexOf('；')!==-1){
        telList.value = str.split('；')
      }
      else if(str.indexOf('、')!==-1){
        telList.value = str.split('、')
      }
      else if(str.indexOf(' ')!==-1){
        telList.value = str.split(' ')
      }
      else if(str.indexOf(')')!==-1){
        let arr = str.split(')')
        arr.pop()
        telList.value = arr.map(item=>{return item+')'})
      }
      else if(str.indexOf('）')!==-1){
        let arr = str.split('）')
        arr.pop()
        telList.value = arr.map(item=>{return item+'）'})
      }
      else{
        telList.value = [str]
      }
      telSelected.value = 0
      showTelPopup.value = true
    }
  }
  else{
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
}
const closeTel = ()=>{
  showTelPopup.value = false
}
const changeTel = (type)=>{
  telSelected.value = type
}
const handleDial = ()=>{
  Taro.makePhoneCall({
    phoneNumber: telList.value[telSelected.value].replace(/[^0-9]/ig,'')
  })
}

const toMap = (item:any) => {
  Taro.openLocation({
    latitude: Number(item.lat),
    longitude: Number(item.lng),
    scale: 11,
  })
}
//
watch(()=>props.show,(newVal)=>{
  if(newVal){
    branchList.value = props.branchList.map(item=>{
      return {...item,checked:item.branchno===props.branchNo}
    })
  }
})

</script>

<style lang="scss">
.branchLists {
  --nut-checkbox-icon-disable-color2: #0966ff;
  width: 100%;
  max-height: 704rpx;
  overflow: auto;
  .branchRow {
    width: 100%;
    box-sizing: border-box;
    height: 176rpx;
    border-bottom: 1rpx solid #f5f5f5;


    position: relative;
    width: 100%;
    height: 176rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    image {
      width: 112rpx;
      height: 112rpx;
      margin-right: 16rpx;
    }
    .text {
      height: 112rpx;
      width: 350rpx;
      .text1 {
        font-weight: 700;
        font-family: PingFangSC-Semibold;
        font-size: 28rpx;
        color: #252525;
      }
      .text2 {
        font-family: PingFang SC;
        font-size: 22rpx;
        color: #666666;
        margin-bottom: 16rpx;
        width: 330rpx;
        height: 30rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .text3 {
        font-family: PingFang SC;
        font-size: 22rpx;
        color: #666666;
      }
    }
    .icon_group {
      display: flex;
      height: 100%;
      align-items: center;
      image {
        width: 64rpx;
        height: 64rpx;
      }
    }
  }
}
.bottoms {
  background: #fff;
  height: 128rpx;
  width: 750rpx;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2500;
  .botBtn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
  }
}
.tel_box {
  width: 100%;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 0 24rpx;
  box-sizing: border-box;
  .telrow {
    width: 100%;
    border-top: 1rpx solid #f0f0f0;
    text-align: center;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #999;
    &.active {
      font-size: 32rpx;
      color: #3091ff;
    }
  }
}
.saveTel {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 32rpx 24rpx 20rpx;
  .btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
    }
  }
}
</style>
